@charset "utf-8";
*{
    margin:0;
    padding:0;
}
body,html{
    width:100vw;
    height:100vh;
    overflow: hidden;
}  
.web{
    position: relative;;
    width:100vw;
    height:100vh;
    overflow:auto;
    background:url(../img/c_bg.jpg) no-repeat;
    >.back{
        position: absolute;
        font-size: 12px;
        color:#e7c698;
        top:1vw;
        left:1vw;
    }
    >.bigTable{
        text-align: center;
        margin:0 auto;
        margin-top:23.5vw;
        position: relative;
        width:19.2vw;
        height: 19.2vw;
        background: #e7c698;
        border-radius: 19.2vw;
        
        >.bt_txt{
            display: inline-block;
            margin-top:6.5vw;
            font-size:13px;
            color:#bf0d20;
        }
        >.circle{
            position: absolute;
            width:7.6vw;
            height: 7.6vw;
            background: #e7c698;
            border-radius: 7.6vw;
            >div{
                display: none;
                height:5vw;
                >img{
                    width:80%;
                }
            }
        }
        >.circleT{
            top:-5vh;
            left:50%;
            transform: translateX(-50%);
        }
        >.circleLt{
            top:-0.5vh;
            left:-40%;
        }
        >.circleRt{
            top:-0.5vh;
            right:-40%;
        }
        >.circleLb{
            bottom:-0.5vh;
            left:-40%;
        }
        >.circleRb{
            bottom:-0.5vh;
            right:-40%;
        }
        >.circleB{
            bottom:-5vh;
            left:50%;
            transform: translateX(-50%);
        }
    }
    >.cir_box{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        width:61vw;
        margin: 0 auto;
        >.table{
            text-align: center;
            margin-top:8vh;
            margin-bottom:7vw;
            // transform: translateX(-50%);
            position: relative;
            width:14vw;
            height: 14vw;
            background: #e7c698;
            border-radius: 14vw;
            >.t_txt{
                display: inline-block;
                margin-top:4.5vw;
                font-size:12px;
                color:#bf0d20;
               
            }
            // &:last-child >.t_txt{
            //     display: inline-block;
            //     text-align: center;
            //     margin-top:2vw;
            //     width:10vw;
            //     height: 10vw;
            //     background: url(../img/c_add.png) no-repeat;
            //     background-position:center;
            // }
            >.circle{
                text-align: center;
                position: absolute;
                width:5.3vw;
                height: 5.3vw;
                background: #e7c698;
                border-radius: 5.3vw;
                >div{
                    display: none;
                    height:3vw;
                    >img{
                        width:80%;
                    }
                }
            }
            >.circleT{
                top:-4vh;
                left:50%;
                transform: translateX(-50%);
            }
            >.circleLt{
                top:-0.4vh;
                left:-40%;
            }
            >.circleRt{
                top:-0.4vh;
                right:-40%;
            }
            >.circleLb{
                bottom:-0.4vh;
                left:-40%;
            }
            >.circleRb{
                bottom:-0.4vh;
                right:-40%;
            }
            >.circleB{
                bottom:-4vh;
                left:50%;
                transform: translateX(-50%);
            }
            &:nth-of-type(odd){
                margin-right:23vw;
            }
        }
        >.addtable{
            text-align: center;
            margin-top:8vh;
            margin-bottom:7vw;
            // transform: translateX(-50%);
            position: relative;
            width:14vw;
            height: 14vw;
            background: #e7c698;
            border-radius: 14vw;
            >.t_txt{
                display: inline-block;
                margin-top:4.5vw;
                font-size:12px;
                color:#bf0d20;
               
            }
            // &:last-child >.t_txt{
            //     display: inline-block;
            //     text-align: center;
            //     margin-top:2vw;
            //     width:10vw;
            //     height: 10vw;
            //     background: url(../img/c_add.png) no-repeat;
            //     background-position:center;
            // }
            >.circle{
                text-align: center;
                position: absolute;
                width:5.3vw;
                height: 5.3vw;
                background: #e7c698;
                border-radius: 5.3vw;
                >div{
                    display: none;
                    height:3vw;
                    >img{
                        width:80%;
                    }
                }
            }
            >.circleT{
                top:-4vh;
                left:50%;
                transform: translateX(-50%);
            }
            >.circleLt{
                top:-0.4vh;
                left:-40%;
            }
            >.circleRt{
                top:-0.4vh;
                right:-40%;
            }
            >.circleLb{
                bottom:-0.4vh;
                left:-40%;
            }
            >.circleRb{
                bottom:-0.4vh;
                right:-40%;
            }
            >.circleB{
                bottom:-4vh;
                left:50%;
                transform: translateX(-50%);
            }
            &:nth-of-type(odd){
                margin-right:23vw;
            }
        }
        >.addtable>.addBTN{
            display: inline-block;
            text-align: center;
            margin-top:2vw;
            width:10vw;
            height: 10vw;
            background: url(../img/c_add.png) no-repeat;
            background-position:center;
        } 
    }
    >.f_text{
        
        color:#e7c698;
        text-align: center;
        // width:50vw;
        margin:0 auto;
        margin-top:6vw;
        padding-bottom:10vw;
    }
    >.f_text2{
        position: absolute;
        left:50%;
        bottom:10%;
        transform: translate(-50%,-50%);
        display:none;
        color:#e7c698;
        text-align: center;
        margin:0 auto;
        
    }
    >.homeBtn{
        display:inline-block;
        position: fixed;
        right: 5.5vw;;
        bottom: 8vw;
        width:7vw;
        >img{
            width:100%;
        }
    }//回到首页按钮
    >.Popup{
        // display:none;
        position: absolute;
        top:0;
        z-index: 999;
        width:100vw;
        height:100vh;
        background: rgba(0,0,0,0.5);
        >.Popup_content{
            position: absolute;
            width:63vw;
            padding-top:2vw;
            padding-bottom:10vw;
            // height:39vw;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
            background: #e7c698;
            border-radius: 12px;
            >p{
                margin-top:0vw;
                text-align: center;
                font-size: 16px;
                color: #bf0d20;
                line-height: 30px;
                margin-bottom:1vw;
                // margin-bottom:15vw;
            }
            >section{
                margin:0 auto;
                width:40vw;
                border-radius: 5px;
                margin-top:1.5vw;
                padding:0.5vw 0;
                display: block;
                background: #bf0d20;
                color:#e7c698;
                text-align: center;
            }
            >span{
                width:5.6vw;
                height:5.6vw;
                position: absolute;
                top:1vw;
                right:1vw;
                >img{
                    width:100%;
                }
            }
        }
    }//弹窗
    //放大桌子样式
}
